<script setup>
import UserInfo from '@/components/UserInfo.vue';
import { ref , reactive, onMounted } from 'vue';
import { getList, getCode , isCodeYes , GetCodeTwo , Renew } from '@/api';
import { useMessage } from 'naive-ui';
import { useRouter } from 'vue-router';


const router = useRouter();

const message = useMessage();
// 用户数据
const userList = ref({});
// 加载
const loading = ref(true);

// 新增账号
const AddUserShow = ref(false);
// 续费账号
const RenewUserShow = ref(false);
const RenewUserVal = ref('');
const RenewUserNick= ref('');

const codeMsg = ref('请扫码进行授权，点击确定按钮');

const addUserFromData = reactive({
  key: '',
  uuid: ''
});

const codeTop = ref(false);
const codeSrc = ref('');
const RenewUserFromDataKey = ref('');

async function GetUserList() {
  loading.value = true;
  let r = await getList();
  console.log(r);
  if(r.code != 200) {
    loading.value = false;
    return message.error(r.msg); 
  }
  if (JSON.stringify(r.data.wechat) != '') {
    loading.value = false;
    userList.value = r.data.wechat;
    return;
  }
}

// 载入事件
onMounted(() => {
  loading.value = true;
  GetUserList();
  console.log(`the component is now mounted.`)
})

// 新增微信
const AddUser = async ()=> {
  if (addUserFromData.key.length <= 0) {
    return message.error('请输入卡密！'); 
  }
  let r = await getCode(addUserFromData.key);
  if (r.code != 200) {
    return message.error(r.msg);
  }
  if (JSON.stringify(r.data) != '') {
    codeSrc.value = r.data.base64;
    codeTop.value = true;
    addUserFromData.uuid = r.data.uuid;
    console.log(addUserFromData.uuid);
    // delayed
    return;
  }
}
// 二次取码
async function HoQuCode(key) {
  let r = await GetCodeTwo(key);
  if (r.code != 200) {
    message.error('二次取码失败');
    return false;
  }
  if (JSON.stringify(r.data) != '') {
    return r.data;
  }
  message.error(r.msg);
  return false;
}

// 扫码完成
const isCodeOk = async ()=> {
  let r = await isCodeYes(addUserFromData.uuid);
  if (r.code != 200) {
    codeTop.value = false;
    return message.error(r.msg);
  }
  codeTop.value = false;
  GetUserList(); // 刷新列表
  return message.success(r.msg);
}

// 修改Code
async function UpdateCode(key=false) {
  if (!key) {
    codeTop.value = true;
    codeMsg.value = '请打开微信同意授权，点击确定按钮';
    codeSrc.value = '';
    codeTop.value = true;
    return;
  }
  let r = await HoQuCode(key);
  if (r) {
    codeMsg.value = '请扫码进行授权，点击确定按钮';
    addUserFromData.uuid = r.uuid;
    codeSrc.value = r.base64;
    codeTop.value = true;
  }
  console.log('修改');
}

async function HomeRenew(wxid,nick) {
  console.log('接受', wxid);
  RenewUserVal.value = wxid;
  RenewUserNick.value = nick;
  RenewUserShow.value = true;
}

// 续费操作
const RenewUser = async ()=>{
  if (RenewUserFromDataKey.value.length <= 0 || RenewUserFromDataKey.value == '') {
    return message.error('请输入完整卡密！');
  }
  if (RenewUserVal.value.length <= 0 || RenewUserVal.value == '') {
    return message.error('请选择需要续费的账号');
  }
  let r = await Renew(RenewUserFromDataKey.value,RenewUserVal.value);
  if (r.code != 200) {
    return message.error(r.msg);
  }
  GetUserList(); // 刷新列表
  return message.success(r.msg);
}

const SwitchUser=()=>{
  router.push('/authorization')
}
</script>

<template>
  <!-- 回到顶部 -->
  <var-back-top :duration="300" />
  
  <var-app-bar title="测试站点" color="#fff" text-color="#000" title-position="left" :elevation="false">
    <template #right>
      <var-button
        text
        color="transparent"
        text-color="#000"
        @click="SwitchUser"
      >切换账号</var-button>
      <var-button
        text
        color="transparent"
        text-color="#000"
        @click="AddUserShow = true"
      >
        <var-icon name="plus" :size="24" /> 新增
      </var-button>
    </template>
  </var-app-bar>
  <!-- 视图 -->
  <var-loading description="获取中...." type="circle" :loading="loading">
    <div v-if="loading || userList.length==0" style="padding-top: 20px;">
      <n-empty description="什么也没找到">
        <template #extra>
          <var-button text outline type="primary">去登录？</var-button>
        </template>
      </n-empty>
    </div>
    <div v-else class="list">
      <var-row>
        <var-col :xs="24" :sm="12" :md="8" :lg="8" v-for="(user, index) in userList">
          <UserInfo :user="user" @updateCode="UpdateCode" @homeRenew="HomeRenew" @refresh="GetUserList"/>
        </var-col>
      </var-row>
    </div>
  </var-loading>

  <var-popup position="top" v-model:show="codeTop" :close-on-click-overlay="false">
    <div class="popup-code-top">
      <div>
        <img class="code-img" :src="codeSrc">
      </div>
      <div>{{ codeMsg }}</div>
      <div style="padding-top: 10px;">
        <var-button text outline type="primary" @click="isCodeOk">确定</var-button>
      </div>
    </div>
  </var-popup>

  <!-- 新增账号 -->
  <var-dialog v-model:show="AddUserShow" :close-on-click-overlay="false"
     @confirm="AddUser" confirmButtonTextColor="#f44336">
    <template #title>
      <var-chip color="#fff" text-color="#3a7afe">
        新增账号
        <template #left>
          <var-icon name="information" />
        </template>
      </var-chip>
    </template>
    <div class="addUser-from">
      <div class="addUser-from-item">
        <n-input v-model:value="addUserFromData.key" type="text" placeholder="请输入激活卡密" >
          <template #prefix>
            <var-icon name="weather-cloudy" />
          </template>
        </n-input>
      </div>
    </div>
  </var-dialog>


  <!-- 续费 -->
  <var-dialog v-model:show="RenewUserShow" :close-on-click-overlay="false"
     @confirm="RenewUser" confirmButtonTextColor="#f44336">
    <template #title>
      <var-chip color="#fff" text-color="#3a7afe">
        续费
        <template #left>
          <var-icon name="information" />
        </template>
      </var-chip>
    </template>
    续费账号昵称：{{ RenewUserNick }}
    <div class="addUser-from">
      <div class="addUser-from-item">
        <n-input v-model:value="RenewUserFromDataKey" type="text" placeholder="请输入续费卡密" >
          <template #prefix>
            <var-icon name="weather-cloudy" />
          </template>
        </n-input>
      </div>
    </div>
  </var-dialog>
</template>

<style scoped>
* {
  --divider-color: rgb(41, 121, 255);
  --dialog-width: 380px;
}
.addUser-from-item {
  margin-bottom: 10px;
}
.popup-code-top {
  display:flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
  flex-direction: column;
  padding: 10px;
}
.code-img {
  max-width: 200px;
  text-align: center;
}
</style>